<template>
	<view>
		<u-navbar title="钱包明细" :border-bottom='false' back-icon-size='48'></u-navbar>
		<u-gap height="20" bg-color="#F2F2F2"></u-gap>
		<view class="main" v-if="detailList.length">
			<view class="detail-li" v-for="(item,index) in detailList" :key='index'>
				<view class="left">
					<view class="type">
						{{item.change_msg}}
					</view>
					<view class="time">
						{{item.create_time}}
					</view>
				</view>
				<view class="right">
					<view class="num">
						{{item.inc_type==1?"+":"-"}} {{item.change_amount}}
					</view>
					<view class="total">
						余额 {{item.after_amount}}
					</view>
				</view>
			</view>
		</view>
		<view class="noCont" v-else>
			<u-empty text="暂无明细" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				detailList: [],
				page: '1'
			}
		},
		onLoad() {
			this.getWallet()
		},
		onReachBottom() {
			let page = Number(this.page) + 1
			this.page = page.toString()
			this.getWallet()
		},
		methods: {
			async getWallet() {
				let res = await myRequest.getMywallet({
					page: this.page
				})
				if (res.status) {
					this.detailList = [...this.detailList, ...res.data]
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 0 20rpx;

		.detail-li {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				.type {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.time {
					margin-top: 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.right {
				.num {
					text-align: right;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
				}

				.total {
					margin-top: 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}

	.noCont {
		padding-top: 320rpx;
	}
</style>
